<script setup>
    //处理按键函数
    const onKeyDown=()=>{
      console.log('onKeyDown')
    }

    //p标签的点击事件
    const onPClick=()=>{
      console.log('onPClick')
    }

    const onDivClick=()=>{
      console.log('onDivClick')
    }
</script>

<template>
  <!-- 1.按键修饰符 -->
   <input type="text" @keydown.enter="onKeyDown">

   <!-- 2.事件修饰符  -->
    <div @click="onDivClick">

      <!-- .prevent:阻止默认行为，此处就是不进行跳转,但冒泡发生-->
      <a href="https://baidu.com" @click.prevent>百度一下</a>

      <!-- .stop:阻止冒泡，同名事件不会向上传递-->
      <p @click.stop="onPClick">p标签</p>

      <!-- 修饰符的链式调用：表明两个同时阻止-->
      <a href="https:www.baidu.com" @click.stop.prevent>百度一下</a>
    </div>
</template>


<style scoped>

</style>